عنوان على شبكة الانترنت يسمى بعنوان الموقع Web‏ . 
5 طكلويمكن زيارة موقع الويب من خلال الكمبيوتر أو الهاتف 
المحمول ።‏ 
صفحة الوبب Web page‏ : 
هى مستند به محتوى إلكترونى ينشر على شبكة الانترنت ويتم 
الصفجة الرئيسة :Home Page‏ 
هى اول صفحة بموقع الويب والتى من خلاله يتم الانتقال لباقى 
صفحات الموقع . 
polis‏ صفحة الويف : صور -نصوص - صوت - فيديو - ارتباط 


أنواع صفحات الويب :- 

| : Static Web Pages صفحات الويب النابتة‎ -1 

المحتوى ثابتا يتم الاطلاع عليها فقط بدون إمكانية إجراء اى معالجة 
2- صفحة الويب التفاعلية Interactive Web Page‏ : 

محتوى يتيح التفاعل والمعالجة 

وللتصميم تستخدم أوامر HTML‏ بالاضافة للغات Jio sl‏ 
JavaScript‏ و لغة PHP‏ 
الفصل Jal‏ . 


1 


BBE 8#  . 
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HU 


حلة الاولى : التخطيط لبناء موقع | 
رسم تخطيطى على الورق لصفحات الموة 
تحديد البيانات والمعلومات 

حلة الثانية : : صفحات | 


بب | 


شکل الصفحة الرئيسية وصفحات الموقع 
تحديد التنسيقات المختلفة وأماكن وضع النصوص والصور ولقطات 


1-إعداد وتجهيز النصوص الصور 
چا 2- جميع الملفات تكون داخل ales‏ واحد 
”.| المرحلة الرابعة : مرحلة تنفيذ صفحات | 
تخویل التضحيم الى ضفحات ويب اواد 
المرحلة الخامسة : نشر الموة الانة 


حجز عنوان للموقع وتخصيص مساحة تخزينية على أحد أجهزة 


: الضغط 44 . , Record button Lawi‏ 
الانتهاء من ۔ التسجيل baal‏ على ١‏ ايقاف “*op‏ 

الضغط على زر التشغيل Play‏ للاستماع الى ~ll‏ من خلال 
السیماعات | 

| ` [<< | التعد فی‎ WU 


من قائمة Effect‏ اختار احد التاثيرات Jio‏ ( تانیر التكرار Repeat‏ و 
تاثير الانعكاس Reverse‏ ( 

ህወ‏ ولصق مقطع صو 

حذف مقطع من Delete : eaa]‏ من لوحة المفاتيح 


رابعا: تصہد ہر ملف الصوت : 
* من قائمة File‏ اختار Export Audio‏ 


* اختیار المكان وتحديد الامتداد المناسب لملف الصوت وكتابة اسم 
للملف 


EBB #  . 


ዘ] 


هناك أنواع مختلفة لامتداد الصوت مثل WAV‏ و MP3‏ 


ملف MP3‏ يكون فيه الصوت أقل نقاء ...1 .ملائم اجس 


"TỦ 


إنشاء وتعديل ملفات الفيديو بط ربقة ማቹ‏ وسربعة 
سا برنامج Open shot‏ مفتوح المصدر وتعمل على Linux‏ 
Windows‏ 
مه Open Shot aol»‏ : 
ose -1‏ من انتاج فيديو ذات حودة عالية ሽ‏ من الصور والخلفيات 
2- سهولة واجهة البرنامج 
3- اضافة التاثيرات والمراحل الانتقالية كفواصل بين الصور 
4- إضافة النصوصر . ع 


مکونات واجهة البر س 
1- الشريط الرئيسى -Main Toolbar‏ 
2- ملفات المشروع .Project Files‏ 
3- تبويب الوظائف Function Tab‏ لتنقل بين ملفات المشروع - 
ملفات الصور - ملفات الصوت 
4- معاينة الفيديو -Preview Window‏ 
5- شريط التحرير Edit Toolbar‏ . 
6- التصغير والتكبير Zoom Slider‏ 
7-٠راس‏ القراءة Play head/Ruler‏ 
8- الشريط الزمنى Timeline‏ 


الشريط الزمنى 
Timeline‏ للبرنا: 


1- - المسطرة Ruler‏ نظھر المدى الزمنى الحالی بالشريط الزمنى 
2- - رس Play ው 5፡1 ል]‏ يقرأ الكليب الحالی الذی بقفف عليه 
3- الكليب الحالى يكون صورة أو صوت أو فيديو 


4- المسارات Tracks‏ المسا 
صورة Ww Qo gl‏ ]8 لقطة BH‏ 


:[ ور داخل | 

من خلال الضغط عل بزر استيراد 

t Files واختر‎ Eile قائمة‎ ٠ .أو فتح‎ 
JI بط‎ 


Project مع السحب للصور فی نافذة ملفات المشروع‎ Daal 
Files 
على حسب‎ 6 ንተፕተ اسراو ہیں و سوہ‎ 


i) 


= Shoei ا ا‎ an 

المسارات Track‏ = 
Lal,‏ : معاينة الفيديو: - 
لعمل المعاينة بالضغط على زر التشغيل y‏ نافذة | 
المعاينة . | 
ات حفظ ino‏ الفيديو Save Project‏ : = 

2 

= 


* حفظ جميع الملفات ፌ1>13‏ مجلد محدد 
* فتح قائمة File‏ واختر save Project As‏ 
9 تسمبة المشروع يحب ان يكون الأسماء المستخدمة axllL‏ 
الانجليزية " 
* تحديد مكان الحفظ داخل مجلد السابق 
* إغلاق البرنامج Open shot‏ 
ملاحظة هامة : 
يكون المشروع غير معرف 
عمل اقتران ችና!‏ بالبرنامج : 
1- الضغط بزر الفارة الايمن على الملف 
2- اختر Properties‏ نم Change‏ نم More Options‏ . 
3- البحث Look for another app on this PC‏ . 
ሰመ -4‏ اقتران لت Association‏ بالملف التنفيذى . 


ee. 
=e 


کو 
١‏ 


Í 


EF መ 
keep øzSlic Clip من القائمة المختصرة اختر شريحة الكليب‎ 
left slide 
انقسام الى شرحتين و الاحتفاظ‎ Keep Both Slides -1 
. بهما‎ 


Keep Left slide -2 
Keep Right slide -3 
الشريحة باليسار‎ 
: لمشاهد الفيديو‎ Effects إضافة تاثيرات‎ : LLG 

1- الضغط على تبويب Effects‏ للانتقال الى التاثيرات 

2- اختيار احد التاثيرات بالضغط والسحب واضافته للفيديو 

وعمل معاينة 

3- لحذف التاثير Remove effect‏ 
ثالثنا:إضافة مرا انتقالية Transitions‏ لمشاهد الفيديو : 
1-الضغط على تبويب الانتقالات - من قائمة Title‏ يتم اختيار Title‏ فيظهر ١‏ 
2- الضغط مع السحب وإضافته ١‏ ١-اختيار‏ قالب الخط “Select a template”‏ 
3- وضع المرحلة الانتقالية فى ؟ -تغيير نوع الخط “Change Font”‏ 
Jl -4‏ فى الفترة الزمنية „JL‏ -تغيير لوت الخط "Text Color’‏ 


رابعا:إضافة نص إلى الفيديو: : 
٤‏ -تغيير لون الخلفية "Background Color’‏ 


نصا الفيديو إلى መ“...‏ انس في منت Save‏ 
1۔ الضغط على زر التصدير الفيديو Export Video‏ أو قائمة File‏ 
اختر Export Video‏ 
2- اکتب اسم الملف الفيديو EAEE ee TTET File Name‏ 
3- تحديد مكان الحفظ 


ابقاء الشريحة التى باليمين ومسح 


4- تحديد نوع امتداد الملف الفيديو Target mp4 - avi‏ ) 
5- تحديد مستوى جودة الملف 

6- الضغط على زر تصدير الفيديو Export Video‏ 

| ذات الامتدادات المختلفة : 


أنواع ملفات الفيد | 
الانترنت 
تیر 
الانترنت 
ታሙ”‏ 


8 


Hyper 7 Text ‘Markup سے‎ 
لغة ا‎ 


تدك تحر ፡ጤ፡‏ 
لغات اخرى لانشاء الصفحات التفاعلية)” 
:HIML ልጻ] ;olal‏ 
سوہ بون الاوامر بال Tags‏ > > ويقوم مستعرض الانترنت 


القواعد الاساسية لاستخدام tHTML polgl‏ 
1. إنشاء ملف نصى باستخدام sai‏ ترامع تحرزيز التضوض:وذلك 
2 . كتابة أوامر HTML‏ حيث یتم وضع الامر ہن العلامتین "><" 
3. معظم الأوامر لها بداية <> ونهاية < / > 
4. حفظ الملف النصى الذى يحتوى على أوامر HTML‏ بامتداد 
HIML 5! HIM‏ 
صفحة الويب asus ec‏ تنفيذها 


"nh | 


4:46 6. لا يشترط أن تكتب أوامر HTML‏ بحروف 5 Capital ሬ.‏ أو 
SFE = 7‏ إنشاء صفحة ویب باستخدام 
ج ٭ اكتب الأمر HTML‏ فی بداية Ul‏ 


الى أن المسیعد مکتوب باللغة ML‏ و دوس 
as‏ عنوان الصفحة E N‏ 

:body +‏ المنطقة الخاصة بكتابة | او موس 
الذى سيظهر داخل الصف 2 


~ 


| إضافة عنوان لصفحة الويب بالأمر <title></Title>‏ : 
ملاحظات : 
* يمكن HTML xalaÏ alis‏ بحروف كبيرة Capital‏ أو صغبرہ 
Small‏ 
٭ مستعرض الانترنت لا يتاثر بالمسافات المتروكة أو الانتقال 
لسطر جدید بضغط مفتاح Enter‏ »: ملف الأوامر . 
2 ام الخا 


84018 


HỆ 


تستخدم الخاصية ol! — dir‏ صفحة سا حسب القيمة 
المخصصة للخاصية dir‏ كما بالجدول التالى 


<"dir="rtl 
ات تغير اتجاه صفحة الويب‎ 


ጃ 
: 
= 


الكتابة بداية من سطر حديد بالامر :<br>‏ 
محاذاة النص توسيط بالأمر :<center></center>‏ 

إضافة فراغات بين الكلمات بالأمر :;;nbsp&‏ 

4- | - تنسيق الخط فی صفحة الويب بالأمر :<font></font>‏ 
لتحكم فی نوع وحجم ولون bal‏ باستخدام alg <font> ;eVWI‏ 


፳፲! 128 


> => 


ملاحظة : يتعرف المستعرض على 7 احجام مختلفة من ]455/5211 
والتى يتم تحديدها بواسطة الخاصية Size‏ حيث تتراوح قيمة هذه 
الخاصية من 1 الى 7 

خطوات تغير نوع الخط الى andalus‏ ولون الخط احمر والحجم 


الخط 6: 
1. فتح الملف النصى السابق والتعديل فيه 
2. كتابة الكود> < 410121115 font face="‏ 
"color="red" size="6‏ 
3. حفظ التعديل من file‏ اختر save‏ 
4. فتح الملف من خلال مستعرض الانترنت 
ملاحظطات : . 
* بعد استخدام أمر الاغلاق <font/>‏ ينتهى التاثير الأمر على 
تنسيقات أى نص يكتب بعده 
* فى حالة عدم استخدام الأمر <font>‏ يظهر نوع الخط على 
aawo‏ الويب بالشكل الافتراضى 
mo. _422chtm1> ` ١ ki `‏ ` ` ¬ ۵07 


፲ 


{ 


= ا 
፦ ንተ‏ = = 
m head} <head>‏ == 
اج وو ا = mM‏ 
ال 
<title>‏ یں “M‏ = 
مدارستے = ሥሠ‏ | 
titles 3o0Ì./::::›‏ 
(|head> Lal</head>‏ 
tbody dir="rtl"> ` body dir="rtl">‏ 


‘font face="andals"color="red" gize="6"> <font face="andals"color="red" size="6"> 


fonts </font> 
</body> </body> 
</html> 


html 


وضع صورة كخلفية لصفحة الويب بالخاصية :Background‏ 
تستخد الخاصية Background‏ التابعة للأمر <body>‏ 
wis *‏ الكود اللازم لوضع الصورة >"= body background‏ 
<"amal.jpg‏ كخافية لصفحة woth‏ 
ات 21 | نوع ملف 
* اضغط بزر الفارة الايمن على „all‏ - 
Properties ›፡>| *‏ من القائمة الفر <img arc="anal , jpg"?‏ 
El<html> -1‏ 1 


—|<head> 


مد رسکی 
</title>‏ 
</head>‏ 8 
clzbody>‏ 38 
—|<font face="andals"color="Blune" 23 ሯፎ="40">‏ 10 
pias ) ፌቆ / ህ>ዊ/ ኋ></ጅ>‏ جميلة وتطيقة ومتطور 8 <ክ><3><ክ>‏ 11 


e © o 95 (ፎ ር |= © 


12 </font> 

| 13 <br> 
14 <img srce="amal.jpg" hieght="450" width="800"> 
15 </body> 


16 </html> 


يتم التحكم فى [ጨሬ‏ 613 الصورة من خلال الخاصية Align‏ للأمر > 
<img‏ وتأخذ الخاصية القيم الآتية 


<htm1> 
<head> 
</head> 


"¬ 
0 


= 
m <body > ጃ 
8" ونعلہ‎ |" <font face="andalus" color=" ። 6. . . ራረ ١ mc 
= = ونظیفة ومتطورة‎ 4l ao وعتطورة محرستي‎ inshu ibai مدرصتي‎ za ہس‎ a 
5 </font> 271") m 
: h <br> سر وت‎ : 


</html> بعد تنفيذ الكود‎ Gus!) iaia 


aus‏ 6541 گي آحد Tale‏ تحریر التصوص 


Bay‏ التص مع الصورة في نفس السطرء 


ويقع التص يمحاذاة منتصف الصورة 


CCITT 
3 


0 


ملاحظات : 

* لمحاذاة الصورة لأقصى اليمين لصفحة الويب نستخدم الكود . 
"align="right‏ 

* لمحاذاة الصورة لیقع النص بمحاذاة الحافة العليا للصورة 
نستخدم الكود "align="top‏ 


0 


التعا 


إدراج الصوت كخلفية صوتية لصفحة بالأمر :<bgsound>‏ 
والخاصية STC‏ 
ملاحظة هامة : 


برنامج مستعرض الإنترنت Internet Explorer‏ هو E‏ 
الوحيد Sil‏ يدعم تنفيذ الأمر <bgsound>‏ والخاصية Src‏ 
المصاحبة له ويتم إدراج الصوت كخلفية صوتية لصفحة الويب 
الخاصية Src‏ للأمر تأخذ قيمة اسم الملف الصوت وامتداده وذلك فى 
حالة حفظ ملف الصوت مع ملف صفحة الويب فى نفسى المجلد 
وعير 


“=bq-aunrcl src "nor . mp3" > 


-Ies 

مك و 

Elles 

acd > 

] ኻፖ:> 

mp3" >‏ . عوجر" یج کے round‏ 
> یا سی 


التعامل مع الفيديو داخل صفحة الويب <embed>s ፡‏ 9 الخاصية 
Src‏ 


<embed Barc="antermet.awi "> 


إدراج ارتباط تشعبی بصفحة الويب بالأمر <a> </a>‏ 

„VỊ‏ تباط التشعبى عبارة عن صورة أو نص مرتبط بعنوان وگکند 
الضغط عليه يتم الانتقال إلى هذا العنوان ويمكن أن يكون داخل 
نفس الصفحة gl‏ بصفحة آخری ፌ1>13‏ نفس الموقع gl‏ فى موقع اخر 


: Hyperlink uri اج ارتباط‎ l 
والتی تحدد‎ <a> للأمر‎ href لادراج ارتباط تشعبسى تستخدم الخاصية‎ 


قيمتها العنوان | - Ta.) </a>?‏ الصورة > العنوان المطلوب الانتقال <a href=  'ፌ;1|‏ 


1- ادراج ارتباط تشعبی نصى بالأمر <a>‏ </ >: 
</a>‏ وزارۃ التريية والتعليم <a href="http: //www.moe.gov.eq"™>‏ 


sa href="http://www.moe.gov.eq"> وزارة التريية والتعليم‎ </a> 
፡ ادراج ارتباط تشعبنى لصورة‎ 


<a hret="myschool .htm"> <img src="amal.jpg"> </a> 


rr 


E 


8: 


$ 


جیا سو ሌቱ‏ و Ù‏ 


5 


፳8፳82፳8፡ 


۷ | 
| لے‎ 
۳٣ TT 


516 - night o تی‎ 
- width - 
መ 


፲ 
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Jel 


<head> ` 
<title> مین >مدرستي‎ Y جو رر‎ 
</head> \ 
<body bgcolor= skyblue" dir='rtl'> 
| <center> 
<font face='tahoma' color="red’ size='6'>.+;>2</font> 
<br> 
„<font face= andalus' color= purple" size= 5"> مد‎ 
د‎ href= home.htm >4. 1) iaia </a>&nbsp; &nbsp; 
<a href='about.htm'>4..;+2) ge </a> &nbsp; &nbsp; 
<a href="photo.htm’> pal as.) </a>&nbsp; &nbsp; 
<a href=" photo.htm >ûllaرلl الرؤية‎ </a>&nbsp; &nbsp; 
| < href="contact.htm >ù; >اتصل‎ /ወ> 


<br><br> 


<img src="school.png’ height="450° width='800> 


</center> ' 


< [body> 
</html> 


<html> 
<head> \/ | اتجاه الصقحة من اليسار الى‎ 
<ክህክ6>ጮ#ሠ፡ና/ህከ6> ጋ 

</head> 


<center> 7 ችን eRe Oe 
للكلمات داخل‎ ball وتوع‎ 
صقحة الويب‎ 
عن المدرسة‎ <br> عن المدرسة‎ 
ሀ تاريخ نشنة المدرسة عن‎ 
تاریخ نشئه المدرسة‎ <ከየ> መጨ. > عنوان المدرسة : القاهرة‎ 
==) السيدة‎ 


التلیقون = ۱۲٣۳٣٤١۷۸۹‏ <اطا>عنوان المدرسة: القاهرة - السيدة መሠ)‏ 
المرحلة التعلیم أساسى 
j /‏ سوہ | <br>‏ التلیفون: ۸۹ )۱٦۷‏ ۱۲۴ 
<01>المرحله: تعليم اساسي 
ادراج قیدیو بصقحة الویب | 
وتحديد حجمه من عرض -> 300 <embed src= video.mp4' height=300' width=‏ 


<font face= andalus' color= red" size= 6> 


<br><br> 
8 href='home.htm'><img src= back.jpg' height= 100 width='100'></a> 
| | ` 


| ¡/center> ኳ፡.. 


وضع صورة لجعلھ ارتياط تشعيى وتحديد عرض وارتقاع الصورة وعند /body>‏ 


الضقط على الصورة ينتقل الى صقحة الویب home‏ المحددہ | 


[html> 


| تحديد لون صقحة الويب sadi‏ 


سس 


مغ 
i‏ 
| 

| 

Fi 

| 


ự 


<title> uuc 6۰ 


</head> | ¬ | 


الويب 
اليوم الصور „ - <center>‏ 


القط للكلمات داخل صفحة 88/82 <body bgcolor=‏ 


<font 1306-)310113' color= red’ ا 7577 تويزو‎ 
ہرم الصو‎ 0۶ “TY 
<img src= students.jpg' height= 400) it 0. oe ام‎ 
<img src= teachers.jpg' ከዩ|ዐከ! 400 width- 3003. ا‎ co E 


1 
ኒ 


سے <img sre= yard.jpg heighf= 400 width= 200 > <br>‏ 
<a href='home.htm' ><irr-sre='back.jpg’ height= 100 width="100'></a>‏ 
| وضع ኦፎ‏ 2 :45 ارنياط تشعبی وتحديد عرض وارنفاع الصورة وعند <jcenter>‏ 
الضقط على الصورة ينتقل الى صقحة الريب home‏ المحددہ body>‏ < 
` 


</html> 


፡ 8 vi‏ والرسالة 


رؤية المدرسة: 


إحداد طالب متمیز قادر على ۔۔۔۔ 


الرسائة: 


تحديد لون صقحة الويب اتجأه <head> እ)‏ 


<title> سني‎ pax ከዘ» - 7 

</head> | 5 
<body bgcolor~'skyblue> =~ 
<center> 7”. d 
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